import React from 'react';
import { Button, Form, Input, DatePicker, Select } from 'antd';
import MyUpload from '@/common_components/upload';
import styles from './index.module.less';
import { useNavigate } from 'react-router-dom';
import { useAppSelector } from '@/redux';
import { select_user_info } from '@/redux/slice/user';

const eduOptions = [
  '初中',
  '高中',
  ' 大专',
  '成人本科',
  '专升本',
  '二本',
  '一本',
  '研究生',
];

const PersonInfo: React.FC = () => {
  const navigate = useNavigate();
  //   const dispatch = useAppDispatch();
  const [form] = Form.useForm();
  const userInfo = useAppSelector(select_user_info);

  const isEdit = !!userInfo?.has_person_info;

  return (
    <div className={styles.wrap}>
      <div className={styles.content}>
        <div className={styles.box}>
          <div className={styles.title}>
            <span className={styles.text}>个人中心</span>
          </div>
          <Form form={form}>
            <Form.Item label="头像" labelCol={{ span: 3 }}>
              <MyUpload />
            </Form.Item>
            <Form.Item label="花名" labelCol={{ span: 3 }}>
              <Input placeholder="赵天一" style={{ width: '200px' }} />
            </Form.Item>
            <Form.Item label="当前薪资" labelCol={{ span: 3 }}>
              <Input placeholder="10000" style={{ width: '200px' }} />
            </Form.Item>
            <Form.Item label="技术栈" labelCol={{ span: 3 }}>
              <Input placeholder="React" style={{ width: '200px' }} />
            </Form.Item>
            <Form.Item label="学历" labelCol={{ span: 3 }}>
              <Select
                placeholder="请选择学历"
                style={{ width: '200px' }}
                options={eduOptions.map((item) => ({
                  value: item,
                  label: item,
                }))}
              ></Select>
            </Form.Item>
            <Form.Item label="毕业时间" labelCol={{ span: 3 }}>
              <DatePicker />
            </Form.Item>
            <Form.Item label="微信号" labelCol={{ span: 3 }}>
              <Input placeholder="wetchat" style={{ width: '200px' }} />
            </Form.Item>
            <div className={styles.btn}>
              {!isEdit ? (
                <Button type="primary" htmlType="submit">
                  保存信息
                </Button>
              ) : (
                <>
                  <Button type="primary" htmlType="submit">
                    确认修改
                  </Button>
                  <Button
                    type="primary"
                    onClick={() => {
                      navigate(-1);
                    }}
                  >
                    返回
                  </Button>
                </>
              )}
            </div>
          </Form>
        </div>
      </div>
    </div>
  );
};

export default PersonInfo;
